
<link rel="stylesheet" type="text/css" href="__PUBLIC__/stylesheets/admin/upload.css"/>
<script type="text/javascript" src="__PUBLIC__/javascripts/admin/jquery-1.7.2.min.js"></script>
<script type="text/javascript"  src="__PUBLIC__/javascripts/admin/zxxFile.js"></script>
<script src="__PUBLIC__/javascripts/admin/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/javascripts/admin/layer/layer.js"></script>
<div id="main">
    <div id="body" class="light">
        <div id="content" class="show">
            <div class="demo">
                <form id="uploadForm" action="{:U('Purchaseorders/addPics')}" method="post" enctype="multipart/form-data">
                    <input name="id" type="text" value='{$id}' hidden="hidden"/>
                    <strong>请使用如下图片格式：jpg,peg,png,pjpeg,gif,bmp<strong>
                    <div class="upload_box">
                        <div class="upload_main">
                            <div class="upload_choose">
                                <input id="fileImage" type="file" size="30" name="fileselect[]" multiple />
                                <span id="fileDragArea" class="upload_drag_area">或者将图片拖到此处</span>
                            </div>
                            <div id="preview" class="upload_preview"></div>
                        </div>
                        <div class="upload_submit">
                            <button type="button" id="fileSubmit" class="upload_submit_btn" onclick="upload()">确认上传图片</button>
                        </div>
                        <div id="uploadInf" class="upload_inf"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    var params = {
        fileInput: $("#fileImage").get(0),
        dragDrop: $("#fileDragArea").get(0),
        upButton: $("#fileSubmit").get(0),
        url: $("#uploadForm").attr("action"),
        filter: function(files) {
            var arrFiles = [];
            for (var i = 0, file; file = files[i]; i++) {
                if (file.type.indexOf("image") == 0) {
                    if (file.size >= 30720000) {
                        alert('您这张"'+ file.name +'"图片大小过大，应小于30000k');
                    } else {
                        arrFiles.push(file);
                    }
                } else {
                    alert('文件"' + file.name + '"不是图片。');
                }
            }
            return arrFiles;
        },
        onSelect: function(files) {
            var html = '', i = 0;
            $("#preview").html('<div class="upload_loading"></div>');
            var funAppendImage = function() {
                file = files[i];
                if (file) {
                    var reader = new FileReader()
                    reader.onload = function(e) {
                        html = html + '<div id="uploadList_'+ i +'" class="upload_append_list"><p><strong>' + file.name + '</strong>'+
                            '<a href="javascript:" class="upload_delete" title="删除" data-index="'+ i +'">删除</a><br />' +
                            '<img id="uploadImage_' + i + '" src="' + e.target.result + '" class="upload_image" /></p>'+
                            '<span id="uploadProgress_' + i + '" class="upload_progress"></span>' +
                            '</div>';

                        i++;
                        funAppendImage();
                    }
                    reader.readAsDataURL(file);
                } else {
                    $("#preview").html(html);
                    if (html) {
                        //删除方法
                        $(".upload_delete").click(function() {
                            ZXXFILE.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
                            return false;
                        });
                        //提交按钮显示
                        $("#fileSubmit").show();
                    } else {
                        //提交按钮隐藏
                        $("#fileSubmit").hide();
                    }
                }
            };
            funAppendImage();
        },
        onDelete: function(file) {
            $("#uploadList_" + file.index).fadeOut();
        },
        onDragOver: function() {
            $(this).addClass("upload_drag_hover");
        },
        onDragLeave: function() {
            $(this).removeClass("upload_drag_hover");
        },
        onProgress: function(file, loaded, total) {
            var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
            eleProgress.show().html(percent);
        },
        onSuccess: function(file, response) {
            $("#uploadInf").append("<p>上传成功，图片地址是：" + response + "</p>");
        },
        onFailure: function(file) {
            $("#uploadInf").append("<p>图片" + file.name + "上传失败！</p>");
            $("#uploadImage_" + file.index).css("opacity", 0.2);
        },
        onComplete: function() {
            //提交按钮隐藏
            $("#fileSubmit").hide();
            //file控件value置空
            $("#fileImage").val("");
            $("#uploadInf").append("<p>当前图片全部上传完毕，可继续添加上传。</p>");
        }
    };
    ZXXFILE = $.extend(ZXXFILE, params);
    ZXXFILE.init();
    function upload(){
        $('#uploadForm').ajaxSubmit(({
            type:'post',
            dataType: "json",
            success: function(data){
                if(data.length==0){
                    alert("上传成功！");
                    parent.select_recieveinfo();
                    parent.layer.closeAll();
                }else{
                    for(var s in data){
                        alert(s+'：'+data[s]);
                    }
                    parent.select_recieveinfo();
                }
            },
        }));
    }
</script>
</body>

